Revision:
Web Storage was introduced with HTML5. It's like a cool tool for web browsers, making websites and apps remember things on your device so that when you return, everything is still there.
Think of it like a magic box where websites can keep information in the form of key/value pairs. Sometimes people also call it DOM storage.
bandwidth reduction: web storage data is stored only on your device, not sent/back and forth with every request, what results into saving the internet bandwidth and usage.
size limit: you can store more significant amounts of data, up to 5MB per website.
data type support: while it mainly supports strings, you can use tricks like serializing the data by using JSON.stringify() to store different types of data into string format.
expiration date: you can keep data permanently. Data stays until you decide to clear your browser. (Depending upon the type of Web Storage method)
It can only store strings, specifically UTF-16 string format, with two bytes per character. This can restrict you from using it for more complex scenarios although, HTML can be stored as a string.
It's local to the browser and specific to the origin (per domain and protocol), and there's no guarantee that the data will persist even in that same context.
security limitation: it's not secure. Don't store any private or personal information in localStorage
The web storage API provides mechanisms for storing data in browsers, such as local storage and session storage.
localStorage in JavaScript allows web applications to store data locally within the user's browser - with no expiration date. The data isn't deleted when the browser is closed, and is available when the browser is opened again.
Local Storage is like a small storage space in your web browser where websites can keep little pieces of information. This storage is useful for saving things like user preferences or data that a website wants to remember, even if you close the browser and come back later.
Data stored remains saved depending on if the browser is using a best-effort method, or a persistent method.
When best-effort is in effect, the data persists as long as the stored data does not exceed the limits, and customers don't manually delete the localStorage saved data.
When persistent is used, data is only deleted, or evicted, by the customer's choice.
The main features of localStorage are:
1/ Shared between all tabs and windows from the same origin; so if we set the data in one window, the change becomes visible in another one.
2/ The data does not expire. It remains after the browser restart and even OS reboot.
All browsers support local storage through the api.Window.localStorage method.
To store data, use setItem(key, value), and to retrieve it, use getItem(key).
However, it's important to note that everything in this box is in the form of text, so if you want to store something more complex like a list or an object, you have to convert it to text first(by using JSON.stringify()) and then convert it back (by using JSON.parse()) when you take it out.
Keep in mind that since this box is in your browser, any JavaScript code running on the same website can peek inside it. So, it's not recommended to store sensitive information such as passwords. Despite its simplicity, local Storage is handy for making web pages more interactive and user-friendly.
setItem(): takes a key-value pair and adds it to localStorage.
syntax: localStorage.setItem(key, value);
If the key does not exist in local storage, the setItem() method will create a new key and assign the given value to it. But if a key with the same name exists in local storage, it will update the value of the key with the provided value.
example
localStorage.setItem("myKey" , "myValue");
localStorage.setItem('username', 'john_doe')
getItem(): takes a key and returns the corresponding value.
syntax: localStorage.getItem(key);
If the given key exists in local storage, the method returns the value of that key. If it doesn't, the method returns "null".
example
let myThing = localStorage.getItem("myKey");
const username = localStorage.getItem('username');
console.log(username); // Output: john_doe
removeItem(): takes a key and removes the corresponding key-value pair.
syntax: localStorage.removeItem(key);
use the removeItem() method when you want to delete a single item from local storage. The method takes in a key as an argument and deletes the corresponding key-value pair from local storage.
example
localStorage.removeItem("myKey");
localStorage.removeItem('username');
clear(): clears localStorage (for the domain).
syntax: localStorage.clear();
this method deletes all key-value pairs in the local storage for the current domain.
example
localStorage.clear();
key(): passes a number to retrieve the key of a localStorage.
syntax:localStorage.key();
Persistence across sessions:
benefit: local storage retains data even when the user closes the browser or navigates away from the page.
use case: ideal for storing long-term preferences, user settings, or any data that needs to persist across multiple visits.
Sufficient storage capacity:
benefit: provides a larger storage capacity (typically around 5-10 MB per domain) compared to traditional cookies.
use case: suitable for applications requiring substantial data storage on the client side.
Efficient data handling:
benefit: data stored in local storage doesn't need to be sent to the server with every HTTP request, reducing bandwidth usage.
use case: enhances website performance by minimizing unnecessary data transmission.
Simplicity:
benefit: local storage operations involve a straightforward API (Application Programming Interface) with methods like setItem() and getItem().
use case: easy to implement and suitable for developers of various skill levels.
Security concerns:
problem: since data is stored locally, there are potential security risks, especially if sensitive information is stored without proper encryption.
consideration: developers should be cautious about storing sensitive user data in local storage.
String-only data type:
problem: local storage primarily supports string data types, requiring additional steps (e.g., JSON.stringify) for complex data structures.
consideration: developers must handle data serialization and deserialization for non-string data types.
Session storage is a type of web storage in browsers that provides a temporary and isolated storage space for web applications. It allows JavaScript to store data during a user's session on a specific website, with the data automatically cleared when the session ends, typically when the user closes the browser tab or window.
This storage mechanism is designed to hold small amounts of data in the form of key-value pairs, like Local Storage. The key distinction lies in its transient nature; session storage is scoped to a single page session, offering a way to maintain state and preferences temporarily. Session storage is like a temporary memory space in your web browser.
Setting data into session storage:
Session storage provides a method called setItem() that allows you to store data for the duration of a user's session on a particular website. This method takes two parameters: a key, which acts as an identifier, and a value, which represents the data you want to associate with that key.
syntax: sessionStorage.setItem(key, value)
Getting data from session storage:
When it's time to retrieve stored data, from Session Storage, you can use the getItem() method. This method accepts key as an input parameter and returns the value associated with the key.
syntax: let storedValue = sessionStorage.getItem(key);
This function searches the value stored under “key” and map it to "storedValue" variable
Removing data entry from session storage:
In scenarios where specific data needs to be removed from Session Storage, the removeItem() method comes into play.
syntax:sessionStorage.removeItem(key)
This command instructs Session Storage to eliminate the data associated with the key.
Clearing all the data from session storage:
The clear() method allows you to wipe out all data stored in Session Storage. This is useful when you want to reset or clear all session-specific information.
syntax:sessionStorage.clear();
This action deletes all key-value pairs stored in Session Storage.
Transient storage:
benefit: session storage is designed to be temporary and tied to a particular browser session, with data being automatically cleared when the session concludes.
use case: ideal for storing data that is only needed during the user's current visit or session.
Simplified cleanup:
benefit: no need to manually clear data; it automatically expires at the end of the session.
use case: simplifies data management for temporary information that is no longer relevant after the session concludes.
same-origin policy:
benefit: adheres to the same-origin policy, meaning a web page can only access data stored by itself or by pages from the same origin.
use case: it enhances security by limiting access to session data across different origins.
Limited persistence:
problem: session storage is limited to the duration of a single page session, making it unsuitable for storing data needed across multiple visits.
consideration: developers must carefully choose when to use Session Storage based on the specific needs of the application.
Smaller storage capacity:
problem: offers a smaller storage capacity compared to Local Storage, limiting the amount of data that can be stored.
cnsideration: may not be suitable for applications requiring extensive client-side data storage.
Same-origin limitation:
problem: the same-origin policy can be a limitation if data needs to be shared between pages from different origins.
consideration: developers should be aware of the restrictions when designing applications with cross-origin data requirements.
example 1:
localStorage.setItem("myCat", "Tom"); const cat = localStorage.getItem("myCat"); localStorage.removeItem("myCat"); localStorage.clear();
example 2:
localStorage.setItem("name", "Chris"); let myName = localStorage.getItem("name"); myName; // Chris localStorage.removeItem("name"); myName = localStorage.getItem("name"); myName;
example 3
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
examle 4
Click the button to see the counter increase.
Close the browser tab (or window), and try again, and the counter will continue to count
(is not reset).
example 4:
<div> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result1"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p> </div> <script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result1").innerHTML = "You have clicked the button" + localStorage.clickcount + " time(s)."; } else { document.getElementById("result1").innerHTML = "Sorry, your browser does not support web storage..."; } } </script>
example 5
const userPreferences = {
theme: 'dark',
fontSize: '16px',
language: 'en'
};
// Storing the object in local storage
localStorage.setItem('preferences', JSON.stringify(userPreferences));
// Retrieving the object from local storage
const savedPreferences = JSON.parse(localStorage.getItem('preferences'));
console.log(savedPreferences); // Output: { theme: "dark", fontSize: "16px", language: "en" }
example 6
var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem( 'car', JSON.stringify(car) );
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );
//
example 7
// Store user preferences
localStorage.setItem('themeColor', 'dark');
localStorage.setItem('fontSize', '16px');
// Retrieve user preferences
const themeColor = localStorage.getItem('themeColor');
const fontSize = localStorage.getItem('fontSize');
// Apply user preferences
document.body.style.backgroundColor = themeColor;
document.body.style.fontSize = fontSize;
selected language:
<div class="spec">
<h4>Select Language</h4>
<!-- Dropdown for selecting language -->
<select id="languageSelector" title="languageselector">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
</select>
<p>selected language: <span id="selected"></span></p>
</div>
<script>
// Function to save the selected language to localStorage
function saveLanguagePreference(language) {
localStorage.setItem('preferredLanguage', language);
}
// Function to load the saved language preference from localStorage
function loadLanguagePreference() {
return localStorage.getItem('preferredLanguage');
}
// Function to set the dropdown to the saved language preference
function setLanguageSelector() {
const savedLanguage = loadLanguagePreference();
if (savedLanguage) {
const selector = document.getElementById('languageSelector');
selector.value = savedLanguage;
}
}
// Event listener for when the user changes the language
document.getElementById('languageSelector').addEventListener('change', function(event) {
const selectedLanguage = event.target.value;
saveLanguagePreference(selectedLanguage);
alert(`Language preference saved: ${selectedLanguage}`);
document.getElementById("selected").innerHTML = selectedLanguage;
});
// On page load, set the dropdown to the saved language preference
window.addEventListener('load', setLanguageSelector);
</script>
HTML :
A <select> element is provided where users can choose their preferred language.
JavaScript :
saveLanguagePreference(language): this function saves the selected language to localStorage using the key 'preferredLanguage'.
loadLanguagePreference(): this function retrieves the saved language preference from localStorage.
setLanguageSelector(): this function sets the dropdown to the previously saved language preference when the page loads.
An event listener is added to the <select> element to detect when the user changes the language. When the language is changed, it saves the new preference and shows an alert confirming the change.
On page load (window.addEventListener('load', ...)), the dropdown is set to the saved language preference.
When the user selects a language from the dropdown, the change event is triggered, and the selected language is saved to localStorage.
When the page is reloaded, the script checks localStorage for a saved language preference and sets the dropdown accordingly.
The localStorage API persists data even after the browser is closed, so the language preference will remain saved until it is manually cleared or removed via code.
code:
<div>
<h4 class="userName"></h4>
<h4 class="userAge"></h4>
<input type="text" class="name" placeholder="Enter name here"/>
<button class="saveNameBtn">Save Name</button>
<br/>
<input type="text" class="age" placeholder="Enter age here"/>
<button class="saveAgeBtn">Save Age</button>
</div>
<script>
const userNameText = document.querySelector(".userName")
const userAgeText = document.querySelector(".userAge")
const saveNameButton = document.querySelector(".saveNameBtn")
const saveAgeButton = document.querySelector(".saveAgeBtn")
saveNameButton.addEventListener("click", () => {
const userName = document.querySelector(".name").value
userNameText.textContent = userName
localStorage.setItem("name", userName)
})
function displayUserName () {
const nameFromLocalStorage = localStorage.getItem("name")
if (nameFromLocalStorage) {
userNameText.textContent = nameFromLocalStorage
} else {
userNameText.textContent = "No name data in local storage"
}
}
displayUserName()
saveAgeButton.addEventListener("click", () => {
const userAge = document.querySelector(".age").value
userAgeText.textContent = userAge
sessionStorage.setItem("age", userAge)
})
function displayUserAge () {
const ageFromSessionStorage = sessionStorage.getItem("age")
if (ageFromSessionStorage) {
userAgeText.textContent = ageFromSessionStorage
} else {
userAgeText.textContent = "No age data in session storage"
}
}
displayUserAge()
</script>
<div class="container">
<div class="to-do-app">
<h4>To-do App</h4>
<br>
<input type="text" id="item" placeholder="Enter item...">
<br>
<br>
<button onclick="add()">Add Item <i class="fa-solid fa-plus"></i></button>
<button onclick="del()">Clear all <i class="fa-solid fa-ban"></i></button>
</div>
<ul class="to-do-list"></ul>
</div>
<style>
.to-do-app button { width: fit-content; padding: 5px; cursor: pointer; border: 1px solid #d3d3d3;
border-radius: 5px; background-color: whitesmoke;}
.to-do-app button:hover {background-color: rgba(0, 0, 0, 0.1);}
li {font-size: 1.5rem;}
.to-do-list {margin-top: 20px; margin-right: 5px; padding: 0 20px 10px 25px; display: flex;
flex-direction: column; gap: 15px; list-style: none;}
.to-do-list li{ font-size: small; background-color: whitesmoke; padding: 20px;}
</style>
<script>
const ul = document.querySelector('ul');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items') ?
JSON.parse(localStorage.getItem('items')) : [];
itemsArray.forEach(addTask);
function addTask(text){
const li = document.createElement('li')
li.textContent = text;
ul.appendChild(li);
}
function add(){
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
addTask(input.value);
input.value = '';
}
function del(){
localStorage.clear();
ul.innerHTML = '';
itemsArray = [];
}
</script>
<div class="box">MY PERSONAL TITLE</div>
<style>
.box { width: 300px; height: 200px; padding: 20px; border: .2vw solid black; background-color: green;
color: white; margin: auto; text-align: center; font-size: 1.5rem; box-sizing: border-box; }
</style>
<script>
// Saving data as key/value pair
localStorage.setItem("name", "MY PERSONAL STYLE");
localStorage.setItem("color", "green");
// Updating data
localStorage.setItem("name", "MY PERSONAL STYLE (MPS)");
localStorage.setItem("color", "Blue");
// Get the data by key
let name = localStorage.getItem("name");
console.log("This is - ", name); // This is - MY PERSONAL STYLE (MPS)
let color = localStorage.getItem("color");
console.log("Value of color is - ", color); // Value of color is - Blue
// Get key on a given position
let key1 = localStorage.key(1);
console.log(key1); // name
// Get number of stored items
let items = localStorage.length;
console.log("Total number of items is ", items); // Total number of items is 3
// Remove key with its value
localStorage.removeItem("color");
// Delete everything
localStorage.clear();
</script>